<template>
  <div class="recommend-body"
       v-if="!list.length">
    <div class="recommend-header">置顶推荐</div>
    <div class="recomment-content">
      <div class="item-card"
           v-for="(item,index) in list"
           :key="index">
        <div class="thumn-cover"
             :style="`background-image:url(${item.image.url});`"
             v-if="showCover(item)">
        </div>
        <div class="item-card-content">
          <div class="info">{{item.summary}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    showCover (item) {
      return typeof (item.image) === 'object' && item.image.url
    }
  }
}
</script>

<style lang="scss" scoped>
.recommend-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: #fff;
  margin-top: 12px;
  .recommend-header {
    display: flex;
    color: #333;
    padding: 5px 0;
    border-bottom: 1px solid #f6f6f6;
  }
  .recomment-content {
    display: flex;
    align-content: flex-start;
    flex-wrap: wrap;
    overflow: hidden;
    .item-card {
      display: flex;
      justify-content: space-between;
      flex: 0 0 50%;
      height: 90px;
      padding: 5px 2px;
      box-sizing: border-box;
      .thumn-cover {
        width: 80px;
        height: 100%;
      }
      .item-card-content {
        display: flex;
        flex: 1;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
    }
  }
}
</style>